<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell class="avatar-cell" @click="$refs.file.click()" title="头像" is-link center>
      <input type="file" ref="file" hidden @change="fileChange">
      <!-- 1.头像行被点击 触发 文件控件的 点击事件，出现文件选择器 -->
      <!-- 2.文件选择器发生onchange事件的时候，将遮罩层打开  -->
      <van-image
        class="avatar"
        round
        fit="cover"
        :src="userinfo.photo"
      />
    </van-cell>
    <van-cell title="昵称" @click="isEditName=true" :value="userinfo.name" is-link />
    <van-cell title="性别" @click="isEditGender=true" :value="userinfo.gender===0 ? '男':'女'" is-link />
    <van-cell title="生日" @click="isEditBirthday=true" :value="userinfo.birthday" is-link />
    <!-- /个人信息 -->

    <!-- 头像裁剪 -->
    <van-popup v-model="isEditPhoto"  position="bottom" :style="{height:'100%',backgroundColor:'#000'}">
      <edit-photo
        v-if="isEditPhoto" 
        :img-url="checkImgFile"
        @close="updatePhoto"
      />
    </van-popup>
    <!-- /头像裁剪 -->

    <!-- 修改昵称弹框 -->
    <van-popup v-model="isEditName" position="bottom" :style="{height:'100%',backgroundColor:'#f4f5f6'}">
      <edit-name 
        v-if="isEditName" 
        @close="updateName" 
        :name="userinfo.name" 
      />
    </van-popup>
    <!-- /修改昵称弹框 -->

    <!-- 修改性别弹框 -->
    <van-popup v-model="isEditGender"  position="bottom" >
      <edit-gender 
        @close="updateGender" 
        :gender="userinfo.gender" 
      />
    </van-popup>
    <!-- /修改性别弹框 -->

    <!-- 修改生日弹框 -->
    <van-popup v-model="isEditBirthday"  position="bottom" >
      <edit-birthday
        :birthday="userinfo.birthday"
        @close="updateBirthday" 
      />
    </van-popup>
    <!-- /修改生日弹框 -->

  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import EditName from './components/edit-name'
import EditGender from './components/edit-gender'
import EditBirthday from './components/edit-birthday'
import EditPhoto from './components/edit-photo'
export default {
  name: 'UserProfile',
  components: {EditName, EditGender, EditBirthday,EditPhoto},
  props: {},
  data () {
    return {
      userinfo:{},  // 用户资料
      // 状态变量控制弹框是否打开
      isEditName:false,    
      isEditGender:false,
      isEditBirthday:false,
      isEditPhoto:false,
      checkImgFile:null
    }
  },
  created () {
    this.loadUserProfile()
  },
  methods: {
    // 加载用户资料
    async loadUserProfile(){
        try {
          const { data:res } = await getUserProfile()
          this.userinfo = res.data
        } catch (error) {
          this.$toast.fail('获取用户资料失败')
        }
    },
    // 更新昵称
    updateName(val){
      val && (this.userinfo.name = val)  // 有传递数据就更新
      this.isEditName = false // 关闭弹框
    },
    // 更新性别
    updateGender(val){
      val!==undefined && (this.userinfo.gender = val)
      this.isEditGender = false 
    },
    // 更新生日
    updateBirthday(val){
      val && (this.userinfo.birthday = val)
      this.isEditBirthday = false
    },
    // 文件变化事件
    fileChange(){
      this.isEditPhoto = true
      // URL.createObjectURL(图片文件信息) 可以得到一个预览地址  
      this.checkImgFile = URL.createObjectURL(this.$refs.file.files[0]) 
    },
    // 更新头像
    updatePhoto(val){
      val && (this.userinfo.photo = val)
      this.isEditPhoto = false
    }
  }
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
}
</style>
